Feat virtual scroll #1895
Feat virtual scroll #1895
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
Someone is attempting to deploy a commit to the varletjs Team on Vercel. A member of the Team first needs to authorize it. |
@varlet/cli
@varlet/icons
@varlet/import-resolver
@varlet/preset-tailwindcss
@varlet/preset-unocss
@varlet/shared
@varlet/touch-emulator
@varlet/ui
@varlet/use
@varlet/vite-plugins
commit: |
| height: 56px; | ||
| box-sizing: border-box; | ||
| border-bottom: 1px solid rgba(0, 0, 0, 0.05); | ||
| color: #333; |
There was a problem hiding this comment.
外层虚拟列表容器已经加了
style="height: 448px; background: var(--color-surface-container-low)"，
本身就算是放在“容器色”里了。
文本颜色还是 color: #333，和你项目里其它示例基本一致
| const containerStyle = computed(() => { | ||
| if (props.containerHeight) { | ||
| return { | ||
| height: typeof props.containerHeight === 'number' ? `${props.containerHeight}px` : props.containerHeight, |
There was a problem hiding this comment.
- height: typeof props.containerHeight === 'number' ? `${props.containerHeight}px` : props.containerHeight,
+ height: `${ toPxNum(props.containerHeight)}px `使用 toPxNum import { toPxNum } from '../utils/elements'
There was a problem hiding this comment.
已参考建议对 containerHeight 做了统一处理，不过这里使用的是 toSizeUnit 而不是 toPxNum：
containerHeight 只是传给 CSS 的高度，不参与内部计算；
使用 toSizeUnit 可以同时支持 number / px 字符串以及其他合法 CSS 长度（vh、% 等），和项目中其它组件的尺寸 props 保持一致；
toPxNum 更适合内部数值计算，且对 % 等值会返回 0，可能导致高度为 0
| }, | ||
| containerHeight: { | ||
| type: [Number, String], | ||
| default: null, |
There was a problem hiding this comment.
已改为使用项目统一的 toSizeUnit 工具处理 containerHeight，和其他组件的尺寸 props 保持一致。
| if (!contentRef.value) { | ||
| return | ||
| } | ||
| const nodes = Array.from(contentRef.value.childNodes).filter((node: Node) => node.nodeType === 1) as HTMLElement[] |
There was a problem hiding this comment.
node.nodeType === Node.ELEMENT_NODEThere was a problem hiding this comment.
已将 node.nodeType === 1 替换为 node.nodeType === Node.ELEMENT_NODE，避免 magic number
3 participants
Checklist
List of tasks you have already done and plan to do.
Change information
Describe your modifications here.
Issues
The issues you want to close, formatted as close #1.
Related Links
Links related to this pr.